<template>
    <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="新增" :width="800" @ok="handleSubmit" >
        <BasicForm @register="registerForm" />
    </BasicModal>
</template>

<script setup lang="ts">
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';

import { BasicForm, useForm } from '/@/components/Form/index';
import { ProductFormSchema } from '../XlProductInfo.data';
import { saveOrUpdate } from '../XlProductInfo.api';

let isUpdate = ref(false);
// 获取emit
const emit = defineEmits(['register', 'success']);

//表单配置
const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
        labelWidth: 150,
        schemas: ProductFormSchema,
        showActionButtonGroup: false,
});

//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    await reset();
    let operateType = data.operateType;
    if (operateType == "add") {
        setModalProps({ confirmLoading: false, showCancelBtn: true, showOkBtn: true });
        isUpdate.value = false;
    }
    if (operateType == "edit") {
        setModalProps({ confirmLoading: false, showCancelBtn: true, showOkBtn: true });

        await setFieldsValue({
            ...data.record,
        });
        isUpdate.value = true;
    }
    if (operateType == "detail") {
        setModalProps({ confirmLoading: false, showCancelBtn: true, cancelText:"关闭",showOkBtn: false });

        await setFieldsValue({
            ...data.record,
        });
        setProps({ disabled: true });//表单禁用
    }
});

//表单提交事件
async function handleSubmit() {
    try {
        let values = await validate();
        setModalProps({ confirmLoading: true });
        //提交表单
        await saveOrUpdate(values, isUpdate.value);
        //关闭弹窗
        closeModal();
        //刷新列表
        emit('success', values);
    } finally {
        setModalProps({ confirmLoading: false });
    }
}
async function reset() {
    await resetFields();
}

const handleLevel1Change = (value) => {
    const form = useForm();
    setFieldsValue({'l2Type':""}); // 清除二级选择的内容
};

</script>

<style scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
    width: 100%;
}

:deep(.ant-calendar-picker) {
    width: 100%;
}
</style>